<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { get, post } from '@/myaxios'

// 删除功能
const deleteFormOpen = (row) => {
    ElMessageBox.confirm(`确定删除[${row.uid}-${row.nickname}]吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            operationData("godCustomer/delete", row)
        })
        .catch(() => {
            console.log('cancel')
        })
}

// 修改功能
const editDialogVisible = ref(false)
const editForm = reactive({
    editData: {
        uid: '',
        communityId: '',
        phone: '',
        withdrawDetail: '',
        skillOpen: 1,
    }
})
const editFormRef = ref()
const editFormSubmit = () => {
    operationData("godCustomer/edit", editForm.editData)
    editDialogVisible.value = false
}

const editFormOpen = (row) => {
    editDialogVisible.value = true
    get("godCustomer/getGodCustomerById", { uid: row.uid })
        .then((resp) => {
            if (resp.data.code === 2000) {
                Object.assign(editForm.editData, {
                    phone: '',
                    withdrawDetail: '',
                }, resp.data.returnData)
            }
        })
        .catch((error) => {
            console.error('获取数据失败:', error)
        })
}
// 添加功能
const addDialogVisible = ref(false)
const addForm = reactive({
    uid: '',
    communityId: '',
    phone: '',
    withdrawDetail: '',
    skillOpen: 1,
})
const addFormRef = ref()
const addFormSubmit = () => {
    operationData("godCustomer/add", addForm)
    addDialogVisible.value = false
}
const addFormOpen = () => {
    addDialogVisible.value = true
    nextTick(() => {
        addFormRef.value.resetFields()
    })
}

// 查询表单
const queryForm = reactive({
    nickname: '',
    communityName: '',
    skillOpen: '',
})
const queryFormRef = ref()

const onSubmit = () => {
    queryData(queryForm)
}
const onReset = () => {
    queryFormRef.value.resetFields()
    queryData({})
}

// 分页配置
const pageInfo = reactive({
    pageData: {
        page: 1,
        pageSize: 10,
        total: 77
    }
})

const handleCurrentChange = (val) => {
    pageInfo.pageData.page = val
    const paramsObj = { ...pageInfo.pageData, ...queryForm }
    queryData(paramsObj)
}

const handleSizeChange = (val) => {
    pageInfo.pageData.page = 1
    pageInfo.pageData.pageSize = val
    const paramsObj = { ...pageInfo.pageData, ...queryForm }
    queryData(paramsObj)
}

// 表格数据
const tableList = reactive({ tableData: [] })

// 查询公共方法
const queryData = (params) => {
    get("godCustomer/query", params)
        .then((resp) => {
            if (resp.data.code === 2000) {
            tableList.tableData = resp.data.returnData || []
            Object.assign(pageInfo.pageData, resp.data.pageInfo)
            } else {
            tableList.tableData = []
            Object.assign(pageInfo.pageData, { page: 1, pageSize: 10, total: 0 })
            }
        })
        .catch((error) => {
            console.error('查询失败:', error)
        })
}

// 操作数据（增删改）
const operationData = (url, params) => {
    post(url, params)
        .then((resp) => {
            if (resp.data.code === 2010) {
                ElMessage.success(resp.returnMsg)
            } else if (resp.data.code === 2011) {
                ElMessage.error(resp.returnMsg)
            }

            // 刷新数据
            const paramsObj = { ...pageInfo.pageData, ...queryForm }
            queryData(paramsObj)
        })
        .catch((error) => {
            console.error('操作失败:', error)
        })
}

// 页面挂载后首次查询数据
onMounted(() => {
    queryData({})
})
</script>

<template>


    <el-form ref="queryFormRef" :inline="true" :model="queryForm">

        <el-form-item label="客户名称" prop="nickname">
            <el-input v-model="queryForm.nickname" placeholder="nickname" />
        </el-form-item>
        <el-form-item label="公会名称" prop="communityName">
            <el-input v-model="queryForm.communityName" placeholder="communityName" />
        </el-form-item>
        <el-form-item label="接单资质" prop="skillOpen">
            <el-select style="width: 190px;" v-model="queryForm.skillOpen" placeholder="skillOpen">
                <el-option label="关闭" :value="0" />
                <el-option label="开启" :value="1" />
            </el-select>

        </el-form-item>

        <el-form-item>
            <el-button type="primary" plain @click="onSubmit">查询</el-button>
            <el-button type="primary" plain @click="onReset">重置</el-button>
        </el-form-item>

    </el-form>




    <el-table height="600px" ref="tableRef" :data="tableList.tableData" style="width: 100%">
        <el-table-column fixed="left" prop="uid" label="客户编号" width="80">
            <template #default="scope">
                <el-tag type="primary"> {{ scope.row.uid }} </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="nickname" label="客户名称" width="180">
        </el-table-column>
        <el-table-column prop="communityId" label="公会编号" width="80">
            <template #default="scope">
                <el-tag type="primary"> {{ scope.row.communityId }} </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="communityName" label="公会名称" width="180">
        </el-table-column>


        <!-- <el-table-column prop="phone" label="手机号" width="180">
            <template #default="scope">
                <el-tag type="success">{{ scope.row.phone }} </el-tag>
            </template>
        </el-table-column> -->
        <el-table-column prop="withdrawDetail" label="收款账号" width="180">
            <template #default="scope">
                <el-tag type="success"> {{ scope.row.withdrawDetail }} </el-tag>
            </template>
        </el-table-column>

        <el-table-column prop="skillOpen" label="接单资质" width="180">
            <template #default="scope">
                <el-tag v-if="scope.row.skillOpen == 1" type="success"> 开启 </el-tag>
                <el-tag v-else type="danger"> 关闭 </el-tag>
            </template>
        </el-table-column>


        <el-table-column fixed="right" label="操作" width="180">
            <template #default="scope">
                <el-button type="primary" plain size="small" @click="editFormOpen(scope.row)">编辑</el-button>
                <!-- <el-button type="primary" plain size="small" @click="deleteFormOpen(scope.row)">删除</el-button> -->
            </template>
        </el-table-column>

    </el-table>

    <el-pagination v-model:current-page="pageInfo.pageData.page" v-model:page-size="pageInfo.pageData.pageSize"
        :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.pageData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />


    <!-- 添加对话框 -->
    <el-dialog v-model="addDialogVisible" title="添加" width="500">
        <el-form ref="addFormRef" :model="addForm" label-width="auto" style="max-width: 400px">
            <el-form-item label="用户编号" prop="uid">
                <el-input v-model="addForm.uid" placeholder="uid" />
            </el-form-item>
            <el-form-item label="公会编号" prop="communityId">
                <el-input v-model="addForm.communityId" placeholder="communityId" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="addForm.phone" placeholder="phone" />
            </el-form-item>

            <el-form-item label="收款账号" prop="withdrawDetail">
                <el-input v-model="addForm.withdrawDetail" placeholder="withdrawDetail" />
            </el-form-item>


            <el-form-item label="接单资质" prop="skillOpen">
                <el-select style="width: 100%;" v-model="addForm.skillOpen" placeholder="skillOpen">
                    <el-option label="关闭" :value="0" />
                    <el-option label="开启" :value="1" />
                </el-select>
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addFormSubmit">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>

      <!-- 修改对话框 -->
  <el-dialog v-model="editDialogVisible" title="修改" width="500">
    <el-form ref="editFormRef" :model="editForm.editData" label-width="auto" style="max-width: 400px">
        
            <el-form-item label="用户编号" prop="uid">
                <el-input disabled v-model="editForm.editData.uid" placeholder="uid" />
            </el-form-item>
            <el-form-item label="公会编号" prop="communityId">
                <el-input disabled v-model="editForm.editData.communityId" placeholder="communityId" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="editForm.editData.phone" placeholder="phone" />
            </el-form-item>

            <el-form-item label="收款账号" prop="withdrawDetail">
                <el-input v-model="editForm.editData.withdrawDetail" placeholder="withdrawDetail" />
            </el-form-item>


            <el-form-item label="接单资质" prop="skillOpen">
                <el-select style="width: 100%;" v-model="editForm.editData.skillOpen" placeholder="skillOpen">
                    <el-option label="关闭" :value="0" />
                    <el-option label="开启" :value="1" />
                </el-select>
            </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editFormSubmit">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>
</style>